<!--  -->
<template>
  <div class="app-foodlist">
    <top-header></top-header>
    <el-table :data="foodList" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="商品名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属店铺">
              <span>{{ props.row.shop }}</span>
            </el-form-item>
            <el-form-item label="商品 ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.shopId }}</span>
            </el-form-item>
            <el-form-item label="商品分类">
              <span>{{ props.row.category }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="食品名称" prop="name"> </el-table-column>
      <el-table-column label="食品介绍" prop="description"> </el-table-column>
      <el-table-column label="评分" prop="rating"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <el-dialog title="修改食品信息" :visible.sync="dialogFormVisible">
      <el-form :model="selectTable">
        <el-form-item label="食品名称" label-width="100px">
          <el-input v-model="selectTable.name" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="食品介绍" label-width="100px">
          <el-input v-model="selectTable.description"></el-input>
        </el-form-item>
        <el-form-item label="食品分类" label-width="100px">
          <el-select
            v-model="selectIndex"
            :placeholder="selectMenu.label"
            @change="handleSelect"
          >
            <el-option
              v-for="item in menuOptions"
              :key="item.value"
              :label="item.label"
              :value="item.index"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TopHeader from "./TopHeader";
import {
  getFoodList,
  getTotalFoodCount,
  getResturantDetail,
  getMenuById,
  getMenu,
} from "../data/api";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    "top-header": TopHeader,
  },
  data() {
    //这里存放数据
    return {
      limit: 2,
      pageSize: 1,
      total: 0,
      foodList: [],
      dialogFormVisible: false,
      selectTable: {}, // 编辑的选项表单的数据
      menuOptions: [], // 食品分类 下拉菜单的内容
      selectMenu: {}, // 当前选中的食品分类数据
      selectIndex: null, // 选中食品分类的下标
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleSelect: function () {},
    // 编辑食品
    handleEdit: function (index, row) {
      // 获取 selectTable 中的数据
      this.getSelectItemData(row, "edit");
      // 编辑对话可见
      this.dialogFormVisible = true;
    },
    // 获取选中行的所有信息
    getSelectItemData: async function (row, type) {
      // 将选中行的数据 赋值给 selectTable
      // 获取餐馆中的详细信息
      const restaurant = await getResturantDetail(row.restaurant_id);
      // 获取分类的名称
      const category = await getMenuById(row.category_id);

      this.selectTable = {
        ...row,
        ...{
          restaurant_name: restaurant.name,
          restaurant_address: restaurant.address,
          category_name: category.name,
        },
      };
      // 当前选中的食品菜单的信息
      this.selectMenu = { label: category.name, value: row.category_id };
      // 获取编辑框 食品分类 下拉菜单数据
      if (type == "edit" && this.restaurant_id != row.restaurant_id) {
        this.getMenu();
      }
    },
    async getMenu() {
      this.menuOptions = [];
      try {
        const menu = await getMenu({
          restaurant_id: this.selectTable.restaurant_id,
          allMenu: true,
        });
        menu.forEach((item, index) => {
          this.menuOptions.push({
            label: item.name,
            value: item.id,
            index,
          });
        });
      } catch (err) {
        console.log("获取食品种类失败", err);
      }
    },
    //删除食品
    handleDelete: function (index, row) {},
    /* 
      当前页码发生变化的时候
    */
    handleCurrentChange: function (page) {
      console.log("当前页码", page);
      // page => pageSize
      this.pageSize = page;
      this.getFoodListData();
    },
    /* 获取食品列表 */
    getFoodListData: async function () {
      let result = await getFoodList({
        limit: this.limit,
        offset: (this.pageSize - 1) * this.limit,
      });
      this.foodList = result;
    },
    /* 获取食品的总数 */
    getFoodTotalCount: async function () {
      let result = await getTotalFoodCount();
      this.total = result.count;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getFoodListData();
    this.getFoodTotalCount();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
</style>